{% extends 'base.html' %}
{% block style %}
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>

    <style>
        /*表格*/
        .table {
            width: 90%;
            margin: 0 auto;
            padding-top: 40px;
        }

        .table tr {
            height: 40px;
            align-items: center;
            font-size: 14px;
            font-family: Microsoft YaHei;
            line-height: 40px;
        }

        .table tr td {
            padding: 0 !important;
        }

        .layui-table-tool {
            font-size: 16px;
            font-family: Microsoft YaHei;
        }

        .layui-table, .layui-table-header {
            background: none !important;
        }

        /*用户信息表单*/
        #userInfo {
            width: 90%;
            margin: 0 auto;
            margin-top: 40px;
        }

        #userInfo .layui-form-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #userInfo .layui-form-label {
            display: inline-block;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            width: 20%;
        }

        #userInfo .layui-input-block {
            display: inline-block;
            margin-left: 0;
            width: 75%;
        }

        #userInfo .btn {
            width: 100%;
        }

        #userInfo .btn .layui-input-block {
            width: 100%;
            margin: 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        #userInfo .btn .layui-input-block .layui-btn {
            background-color: #1E9FFF;
        }

        {#下拉列表#}
        dd.layui-this {
            background-color: #1E9FFF !important;

        }

        {#头部工具#}
        .layui-table-tool {
            width: 100%;
            display: flex;
            flex-direction: row;
            background: none;
        }

        .layui-table-tool .layui-table-tool-temp {
            width: 100%;
            padding-right: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        {#行内工具#}
        #operateBtn {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 90%;
            margin: 0 auto;
            height: 100%;
        }

        #operateBtn a:hover {
            color: #2671EE;
        }

        #operateBtn div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        #operateBtn div img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        #operateBtn div li {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            color: #2671EE;
        }

        .layui-icon-set-sm:before {
            content: "\e620";
            text-align: center;
            position: absolute;
            display: block;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #operateBtn div .text {
            font-size: 14px;
            font-weight: 400;
            color: #009688;
            background: none;
            padding-right: 0;
        !important;
            padding-left: 0;
        !important;
        }

        {#赋权表单#}
        #userCount {
            display: flex;
            width: 220px;
            height: 150px;
            flex-direction: column;
            justify-content: space-around;
            align-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); /*自己的50% */

        }

        #userCount div {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-content: center;
        }

        #userCount div:nth-child(2) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
        }

        #userCount .userCountValue {
            height: 36px;
            width: 80px;
            font-size: 16px;
            line-height: 36px;
            font-family: Microsoft YaHei;
            color: #666;
            text-align: center;
        }

        #userCount .userCountBtn {
            height: 40px;
            width: 50px;
            border-color: #1E9FFF;
            background-color: #1E9FFF;
            font-size: 25px;
            line-height: 40px;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            padding: 0;
        }

        #userCount #ok {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        #userCount #cancel {
            font-size: 14px;
            border-radius: 2px;
            border-color: #1E9FFF;
            background-color: #1E9FFF
        }

        {#删除用户#}
        .layui-layer-btn {
            text-align: center !important;
        }

        .layui-table-fixed {
            display: none;
        }
    </style>

{% endblock %}

{% block content %}
    <div class="children-body" style="background-color: #ccc !important;margin: 40px;height: 80%">
        <div class="table">
            <table id="areaTable" lay-size="sm" lay-filter="areaTable"></table>
        </div>


         <div class="table">
            <table id="gradeTable" lay-size="sm" lay-filter="gradeTable"></table>
        </div>
    </div>


{% endblock %}
{% block script %}

    <script src="../static/layui/layui.js"></script>
    <script>
        {#var csrftoken = "{{csrf_token()}}"#}
        layui.use(['table', 'layer', 'form'], function () {
            let table = layui.table;
            let form = layui.form;
            let userInfoLayer = null;
            //渲染表格
            let userTable = table.render(
                {
                    elem: "#areaTable",
                    page: true,
                    limit: 5,
                    limits: [5, 10],
                    url: '/get_database',
                    {#headers: {"X-CSRFToken": csrftoken},#}
                    method: 'GET',
                    where: {'position': 1},

                    cols: [[
                        {field: 'area', title: '城市', align: 'center', width: '30%', fixed: 'left'},
                        {field: 'count', title: '累计登记核酸数量', align: 'center', width: '25%', fixed: 'left'},
                    ]],
                    toolbar: '#toolbar',
                    defaultToolbar: [],
                    //表格渲染完执行
                    done: function (res, curr, count) {

                        $("[data-field='password']").css('display', 'none'); //隐藏密码
                        $("[data-field='count']").css('display', 'none'); //隐藏密码
                        //回车搜索
                        $('#keyword').bind('keyup', function (event) {
                            if (event.keyCode == '13') {
                                searchUser()
                            }
                        })
                    }
                },
            )
            //监听头部工具--新增用户
            table.on('toolbar(userTable)', function (obj) {
                //新增
                if (obj.event == 'add') {
                    addInfo()
                }
                //搜索
                else if (obj.event == 'search') {
                    searchUser();
                }
            })

            //搜索
            function searchUser() {
                let keyword = $('#keyword').val().trim()
                userTable.reload({
                    method: 'GET',
                    where: {
                        'name': keyword,
                        'position': 1
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
                $('#keyword').val(keyword)
            }

            function addInfo() {
                var loading = layer.msg("正在为您更新信息，请稍后...", {icon: 16, shade: [0.3, "gray"], time: false});
                $.ajax({
                    url: '/predict',
                    method: 'post',
                    dataType: 'JSON',
                    success: function (res) {
                        layer.close(loading)
                        layer.msg('数据更新成功！');
                        userTable.reload()
                    },
                    error: function (res) {
                        layer.msg('数据更新失败！');
                    }
                });
            }


        });
    </script>

    <script type="text/html" id="toolbar">
        <div id="search">
            <div class="layui-inline">
                <input id="keyword" class="layui-input" autocomplete="off" placeholder="请输入省份" style="font-size: 16px">
            </div>
            <button class="layui-btn" data-type="reload" style="font-size: 16px"
                    lay-event="search">
                搜索
            </button>
        </div>
        
    </script>
{% endblock %}
